<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/common :: common-header"></head>

<body>
	<!-- Navigation -->
	<nav th:replace="fragments/common :: common-navbar"></nav>

	<!-- Page Content -->
	<section class="jumbotron text-center">
		<div class="container">
			<h1 class="jumbotron-heading">CONTACT US</h1>
			<p class="lead text-muted mb-0">Where and how to reach us.</p>
		</div>
	</section>
	<div class="container">
		<div class="row">
			<div class="col">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb">
						<li class="breadcrumb-item"><a th:href="@{/}">Home</a></li>
						<li class="breadcrumb-item active" aria-current="page">Contact</li>
					</ol>
				</nav>
			</div>
		</div>
	</div>
	<div class="container">
	<h2 class="title">Our Location on Map</h2>
	<hr />
	<div class="contaner">
		<div class="row">
			<div class="col-12 col-sm-8">
				<div class="embed-responsive embed-responsive-1by1">
					<iframe
						src="https://www.openstreetmap.org/export/embed.html?bbox=30.52144378423691%2C50.45031435465748%2C30.52348762750626%2C50.4513271219105&amp;layer=mapnik&amp;marker=50.45082074099383%2C30.522465705871582"
						style="border: 1px solid black" class="embed-responsive-item">
					</iframe>
				</div>
			</div>
			<div class="container col-12 col-sm-4">
				<div class="card bg-light mb-3">
					<div class="card-header bg-success text-white text-uppercase">
						<i class="fa fa-home"></i> Address
					</div>
					<div class="card-body">
						<p>Somewhere at the Independence Square</p>
						<p>01001 Kyiv</p>
						<p>Ukraine</p>
						<p>Email : turtech@example.com</p>
						<p>Tel. +380 99 999 99 99</p>
					</div>
				</div>
			<div class="card">
				<div class="card-header bg-success text-white">
					<i class="fa fa-clock-o"></i> OPENING HOURS
				</div>
				<div class="card-body">
					<ul class="list-group">
						<li
							class="list-group-item list-group-item-action list-group-item-success">Monday
							<span class="pull-right">9:00-23:00</span>
						</li>
						<li
							class="list-group-item list-group-item-action list-group-item-success">Tuesday
							<span class="pull-right">9:00-23:00</span>
						</li>
						<li
							class="list-group-item list-group-item-action list-group-item-success">Wednesday
							<span class="pull-right">9:00-23:00</span>
						</li>
						<li
							class="list-group-item list-group-item-action list-group-item-success">Thursday
							<span class="pull-right">9:00-23:00</span>
						</li>
						<li
							class="list-group-item list-group-item-action list-group-item-success">Friday
							<span class="pull-right">9:00-23:00</span>
						</li>
						<li
							class="list-group-item list-group-item-action list-group-item-success">Saturday
							<span class="pull-right">9:00-23:00</span>
						</li>
						<li
							class="list-group-item list-group-item-action list-group-item-warning">Sunday
							<span class="pull-right">10:00-22:00</span>
						</li>
					</ul>
				</div>
			</div>
			</div>
		</div>
		</div>
		<div class="container my-4">
			<h2 class="title" id="messageUs">Or just drop us a message</h2>
			<div class="alert alert-info" th:if="${messageSent}">
				Message has been sent.
			</div>
			<hr />
					<div class="card">
						<div class="card-header bg-primary text-white">
							<i class="fa fa-envelope"></i> CONTACT US
						</div>
						<div class="card-body">
							<form th:action="@{/sendMessage}" method="post">
								<div class="form-group">
									<label for="name">Name</label> <input type="text"
										name="name"
										class="form-control" id="name" aria-describedby="emailHelp"
										placeholder="Enter name" required="required">
								</div>
								<div class="form-group">
									<label for="email">Email address</label> <input type="email"
										name="email"
										class="form-control" id="email" aria-describedby="emailHelp"
										placeholder="Enter email" required="required"> <small
										id="emailHelp" class="form-text text-muted">We'll
										never share your email with anyone else.</small>
								</div>
								<div class="form-group">
									<label for="message">Message</label>
									<textarea class="form-control" id="message"
									name="message" rows="6" required="required"></textarea>
								</div>
								<div class="mx-auto">
									<button type="submit" class="btn btn-primary text-right">Send message</button>
								</div>
							</form>
						</div>
					</div>
		</div>
	</div>

	<!-- Footer -->
	<footer th:replace="fragments/common :: common-footer"></footer>

	<div th:replace="fragments/common :: common-bottom"></div>
</body>
</html>